<script lang="ts" setup>
import { useRoute } from "vue-router";
import { onMounted, reactive, ref } from "vue";
import { storeToRefs } from "pinia";
import userChartShowState from "../../../store/chartExample";
import { requestGetSoundSource, requestSingerAlbum, requestSingerHotSong } from "../../../utils/axiosURL";
import defaultImg from "../../../assets/logo.png";
import useSongURLStore from "../../../store/songURL";

const { songName, playStates } = storeToRefs(useSongURLStore())
const songURLStore = useSongURLStore()
const { state } = storeToRefs(userChartShowState())
const route = useRoute()
// query ID
const SingerQueryID = ref<any>(route.query.id)
// 动态路由 ID
const SingerParamsID = ref<any>(route.params.id)
// 存储歌手专辑数据
let saveSingerAlbumData = reactive<any>([])
// 存储歌手热门50首
let savaSingerHotSong = reactive<any>([])
// 热门歌曲列表高度
let hotSongListHeight = ref<string | any>('365px')


// 获取歌手专辑
const requestSingerAlbumFn = () => {
  requestSingerAlbum(SingerParamsID.value === ':id' ? SingerQueryID.value : SingerParamsID.value).then((data: any) => {
    saveSingerAlbumData.values = data.hotAlbums
  }).catch(_ => { })
}

// 获取歌手五十首热门歌曲
const requestSingerHotSongFn = () => {
  requestSingerHotSong(SingerParamsID.value === ':id' ? SingerQueryID.value : SingerParamsID.value).then((data: any) => {
    savaSingerHotSong.values = data.songs
  }).catch(_ => { })
}

// 双击歌曲播放事件函数
const clickSongPlay = (id: number, name: string, singer: string, picUrl: string, duration: number, index: number) => {
  localStorage.setItem("playState", "false")
  songURLStore.playStateChange(false)
  requestGetSoundSource(id).then(({ data }: any) => {
    songURLStore.init(data[0].url, name, singer, picUrl, duration, index, id)
    localStorage.setItem('songInfomation', JSON.stringify(
      {
        songName: name,
        songUrl: data[0].url,
        singer: singer,
        picUrl: picUrl,
        duration: duration,
        index,
        id
      }
    ))
  }).catch((err: any) => {
    console.log(err);
  })
}

// 注册局部自定义指令
const vLazy = {
  mounted(el: HTMLImageElement, binding: any) {
    // el表示使用指令的DOM元素
    // bindings表示指令相关的信息是一个对象 如v-lazy="xxx",bindling即是xxx对应的内容
    // 指令的功能：实现图片的懒加载
    // 1、监听图片是否进入可视区
    const observer = new IntersectionObserver(([{ isIntersecting }]) => {
      // true；进入可视区域，false：未进入可视区域
      if (isIntersecting) {
        // 1、给图片的src属性赋值图片的地址
        el.src = binding.value
        // 2、取消图片的监听，默认是会一直监听的，如果不取消。就会一直执行
        observer.unobserve(el)
        // 3、加载的图片失败了，显示默认的图片地址
        el.onerror = () => {
          el.src = defaultImg
        }
      }
    }, {
      threshold: 0
    })
    observer.observe(el)
  },
};

onMounted(() => {
  requestSingerAlbumFn()
  requestSingerHotSongFn()
})

</script>

<template>
  <div class="albumWrap">
    <div class="zeroState" v-if="state === 0">
      <div class="albumItem" v-if="Object.keys(saveSingerAlbumData.values).length"
        v-for="item in saveSingerAlbumData.values">
        <div class="itemTop">
          <div class="img_Wrap">
            <RouterLink
              :to="{ path: `/AlbumDetail/${item.id}`, query: { url: item.picUrl, name: item.name, time: item.publishTime, singerName: item.artist.name } }">
              <img v-lazy="item.picUrl" alt="">
            </RouterLink>
          </div>
          <div class="pseudo">
            <div class="pseudo_cir"></div>
          </div>
        </div>
        <div class="itemBtm">
          <RouterLink
            :to="{ path: `/AlbumDetail/${item.id}`, query: { url: item.picUrl, name: item.name, time: item.publishTime, singerName: item.artist.name } }">
            {{ item.name }}
          </RouterLink>
        </div>
      </div>
      <GlobalListItemSkeleton v-else v-for="item in 10" />
    </div>
    <div class="oneState" v-else-if="state === 1">
      <div class="albumItems" v-for="item in saveSingerAlbumData.values"
        v-if="Object.keys(saveSingerAlbumData.values).length">
        <div class="leftImg">
          <RouterLink
            :to="{ path: `/AlbumDetail/${item.id}`, query: { url: item.picUrl, name: item.name, time: item.publishTime, singerName: item.artist.name } }">
            <img v-lazy="item.picUrl" alt="">
          </RouterLink>
          <div class="pseudo">
            <div class="pseudo_cir"></div>
          </div>
        </div>
        <div class="rightDesc">
          <p class="album_name">
            <RouterLink
              :to="{ path: `/AlbumDetail/${item.id}`, query: { url: item.picUrl, name: item.name, time: item.publishTime, singerName: item.artist.name } }">
              {{ item.name }}
            </RouterLink>
          </p>
          <p class="album_songCount">{{ item.size }}首</p>
          <p class="album_publishTime">发行时间: {{
            new Date(item.publishTime).getFullYear()
            + '-' + (parseInt(new Date(item.publishTime).getMonth()) + 1)
            + '-' + new Date(item.publishTime).getDate()
          }}</p>
        </div>
      </div>
      <AlibumListSkeleton v-else v-for="item in 10" />
    </div>
    <div class="secondState" v-else>
      <div class="newSecondState" v-if="Object.keys(saveSingerAlbumData.values).length">
        <div class="legendItem">
          <div class="leftWrapImg">
            <img src="../../../assets/tops.png" alt="">
          </div>
          <div class="rightWrapList">
            <p class="listenMusicTop">热门50首</p>
            <ul :style="`height: ${hotSongListHeight}; overflow: hidden;`">
              <li v-for="(item, index) in savaSingerHotSong.values"
                @dblclick="clickSongPlay(item.id, item.name, item.ar[0].name, item.al.picUrl, item.dt, index)">
                <span class="index">{{ index + 1 < 10 ? `0${index + 1}` : index + 1 }}</span>
                    <span v-if="item.name !== songName" class="iconfont icon-xihuan"></span>
                    <span v-else>
                      <span v-if="playStates" class="iconfont icon-24gf-volumeZero"></span>
                      <span v-else class="iconfont icon-24gf-volumeMiddle"></span>
                    </span>
                    <span class="iconfont icon-xiazai"></span>
                    <span class="songName">{{ item.name }}</span>
                    <button v-if=item.hr>Hi-Res</button>
                    <RouterLink :to="`/MVDetail/${item.mv}`">
                      <button class="mv" v-if=item.mv>MV</button>
                    </RouterLink>
                    <button v-if=item.sq>SQ</button>
                    <p class="duration">
                      <SongTime :songDuration=item.dt />
                    </p>
              </li>
            </ul>
            <div class="viewMore" @click="() => hotSongListHeight = 'auto'" v-if="hotSongListHeight !== 'auto'">
              <p>查看全部50首</p>
            </div>
          </div>
        </div>
        <AlbumLegendItem v-for="item in saveSingerAlbumData.values" :id="item.id" :name="item.name" :picUrl="item.picUrl"
          :time="item.publishTime" :singerName="item.artist.name" />
      </div>
      <LegendItemSkeleton v-else v-for="item in 6" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.albumWrap {
  width: 100%;
  margin-top: 20px;
  box-sizing: border-box;

  .zeroState {
    display: flex;
    flex-wrap: wrap;
    margin-left: 30px;

    .albumItem {
      width: 22%;
      margin: 0 22px 15px 0;

      .itemTop {
        display: flex;
        width: 100%;
        overflow: hidden;

        .img_Wrap {
          flex-basis: 70%;
          width: 70%;
          min-height: 120px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 8px;
          }
        }

        .pseudo {
          position: relative;
          flex: 1;

          .pseudo_cir {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;

            &::after {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: -170px;
              margin: auto;
              content: "";
              width: 150px;
              height: 150px;
              background: repeating-radial-gradient(#252525 6px,
                  #000 10px);
              border-radius: 50%;
            }
          }

          &::before {
            z-index: 1;
            content: "";
            position: absolute;
            top: 6px;
            left: 0;
            width: 0;
            height: 30%;
            border-style: solid solid solid solid;
            border-width: 6px 0px 6px 6px;
            border-color: rgba(218, 214, 215, 0.28) transparent transparent rgba(218, 214, 215, 0.28);
            border-radius: 4px;
          }

          &::after {
            content: "";
            position: absolute;
            bottom: 6px;
            left: 0;
            width: 0;
            height: 30%;
            border-style: solid solid solid solid;
            border-width: 6px 0px 6px 6px;
            border-color: transparent transparent rgba(218, 214, 215, 0.28) rgba(218, 214, 215, 0.28);
            border-radius: 4px;
          }
        }
      }

      .itemBtm {
        line-height: 25px;
        font-size: $font-size-sm;
        font-family: $textFont;
        color: $font_main_color;
      }
    }
  }

  .oneState {
    display: flex;
    flex-wrap: wrap;

    .albumItems {
      display: flex;
      width: 100%;
      height: 85px;

      .leftImg {
        display: flex;
        align-items: center;
        width: 100px;
        height: 85px;
        padding-left: 30px;

        img {
          flex-basis: 60px;
          width: 60px;
          height: 60px;
          border-radius: 6px;
        }

        .pseudo {
          position: relative;
          flex: 1;
          height: 100%;

          .pseudo_cir {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;

            &::after {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: -75px;
              margin: auto;
              content: "";
              width: 60px;
              height: 60px;
              background:
                repeating-radial-gradient(#252525 6px,
                  #000 10px);
              border-radius: 50%;
            }
          }

          &::before {
            z-index: 1;
            content: "";
            position: absolute;
            top: 16px;
            left: 0;
            width: 0;
            height: 20%;
            border-style: solid solid solid solid;
            border-width: 4px 0px 4px 4px;
            border-color: rgba(240, 240, 241, 0.28) transparent transparent rgba(240, 240, 241, 0.28);
            border-radius: 4px;
          }

          &::after {
            content: "";
            position: absolute;
            bottom: 16px;
            left: 0;
            width: 0;
            height: 20%;
            border-style: solid solid solid solid;
            border-width: 4px 0px 4px 4px;
            border-color: transparent transparent rgba(240, 240, 241, 0.28) rgba(240, 240, 241, 0.28);
            border-radius: 4px;
          }
        }
      }

      .rightDesc {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        padding-right: 20px;
        box-sizing: border-box;
        font-size: $font-size-sm;
        font-family: $textFont;
        color: $font_main_color;

        .album_name {
          width: 40%;
          text-align: center;
        }

        .album_songCount {
          width: 20%;
          text-align: center;
        }

        .album_publishTime {
          width: 40%;
          text-align: center;
        }
      }

      &:nth-child(odd) {
        background-color: rgb(250, 250, 250);
      }

      &:hover {
        background-color: rgb(241, 242, 243);
      }
    }
  }

  .secondState {
    .legendItem {
      display: flex;
      width: 100%;
      margin-top: 30px;
      margin-bottom: 30px;

      .leftWrapImg {
        position: relative;
        width: 150px;
        height: 150px;
        margin-left: 25px;
        border-radius: 6px;
        overflow: hidden;
        background-color: #99a9bf;

        img {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
          width: 60%;
          height: 60%;
        }
      }

      .rightWrapList {
        flex: 1;
        margin-left: 60px;

        .listenMusicTop {
          font-size: $font-size-md;
          font-family: $activeTextFont;
        }

        ul {
          padding-right: 30px;
          box-sizing: border-box;

          li {
            padding-left: 30px;
            padding-right: 30px;
            line-height: 35px;
            box-sizing: border-box;
            border-radius: 6px;

            .index {
              margin-right: 10px;
              color: $font_second_color;
              font-size: $font-size-xs;
            }

            .mv {
              cursor: pointer;
            }

            .icon-xihuan,
            .icon-xiazai {
              margin-right: 10px;
              color: $font_second_color;
            }

            .icon-24gf-volumeZero,
            .icon-24gf-volumeMiddle {
              margin-left: 3px;
              color: $font_red_color;
              margin-right: 8px;
            }

            .songName {
              margin-left: 15px;
              font-size: $font-size-xs;
            }

            button {
              border: none;
              outline: none;
              height: 16px;
              line-height: 16px;
              padding: 0 2px;
              border: 1.5px solid $theme-red;
              background-color: #fff;
              color: $font_red_color;
              margin: 0 4px;
              font-family: $activeTextFont;
              font-size: $font-size-xs;
              border-radius: 3px;
              font-weight: bold;
            }

            .duration {
              float: right;
              margin-left: 15px;
              font-size: $font-size-xs;
              color: $font_second_color;
            }

            &:nth-child(odd) {
              background-color: rgb(250, 250, 250);
            }

            &:hover {
              background-color: rgb(241, 242, 243);
            }
          }
        }

        .viewMore {
          width: 100%;
          padding-right: 30px;
          box-sizing: border-box;

          p {
            padding-right: 30px;
            box-sizing: border-box;
            line-height: 30px;
            text-align: right;
            font-size: $font-size-xs;
            font-family: $activeTextFont;
            color: $font_second_color;
            background-color: rgb(250, 250, 250);
          }
        }
      }
    }
  }
}

:deep(.el-skeleton__item) {
  width: 100%;
}

@media screen and (min-width: 1220px) {
  .albumItem {
    width: 18% !important;
  }
}

@media screen and (min-width: 1250px) {
  .albumItem {
    width: 18% !important;
  }
}

@media screen and (min-width: 1280px) {
  .albumItem {
    width: 18% !important;
  }
}

@media screen and (min-width: 1310px) {
  .albumItem {
    width: 18% !important;
  }
}

@media screen and (min-width: 1340px) {
  .albumItem {
    width: 18% !important;
  }
}

@media screen and (min-width: 1370px) {
  .albumItem {
    width: 18% !important;
  }
}

@media screen and (min-width: 1400px) {
  .albumItem {
    width: 18% !important;
  }
}

@media screen and (min-width: 1430px) {
  .albumItem {
    width: 18% !important;
  }
}
</style>
